<template>
  <el-dialog width="70%" title="导入导出设置" v-model="dialogVisible" modal ref="dialog" @close="closeDialog" draggable
    :close-on-click-modal="false" :append-to-body="true">
    <el-tabs tab-position="top" ref="tabs" v-model="activeName" v-if="dialogVisible">
      <el-tab-pane label="导入模版设置" name="0">
        <el-transfer v-model="rightData1" target-order="original" @right-check-change="handleRightChange"
          :titles="['全部字段', '导入表格字段']" :data="allfeils" :props="{ key: 'defineId', label: 'fieldTitle' }">
          <div slot-scope="{ option }">
            <span>{{ option.fieldTitle }}</span>
            <span v-if="rightData1.indexOf(option.defineId) !== -1"
              @click.stop.prevent="publicMobileMethod(option.defineId)">
              <el-switch v-model="option.impNotNullFlag" :active-value="1" :inactive-value="0" inactive-text="必填项"
                active-color="#13ce66">
              </el-switch>
            </span>
          </div>
        </el-transfer>
      </el-tab-pane>
      <el-tab-pane label="导出模版设置" name="1">
        <el-transfer v-model="rightData2" target-order="original" @right-check-change="handleRightChange"
          :titles="['全部字段', '导出表格字段']" :data="allfeils" :props="{ key: 'defineId', label: 'fieldTitle' }">
          <div slot-scope="{ option }">
            <span>{{ option.fieldTitle }}</span>
          </div>
        </el-transfer>
      </el-tab-pane>
    </el-tabs>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
      <el-button size="mini" type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { mapState } from 'vuex'
import {
  resetBoxImpTemplate,
  resetBoxExpTemplate,
  resetArchiveExpTemplate,
  resetArchiveImpTemplate,
} from '@/api/sys/dict'
import {
  queryImpFieldArchive,
  queryImpFieldBox,
  queryExpFieldArchive,
  queryExpFieldBox,
} from '@/api/sys/field'
export default {
  name: 'ImportExportSet',
  // props: {
  //   label: {
  //     type: String,
  //     default: () => '0',
  //   },
  // },
  data() {
    return {
      label: '',
      item: [], // 右侧勾选数据
      indexKey: null, // 高亮显示
      dialogVisible: false,
      value4: [],
      allfeils: [],
      // 必填
      isRequiredlist: [],
      activeName: '0',
      rightData1: [],
      rightData2: [],
    }
  },
  computed: {
    ...mapState(['fields']),
  },
  watch: {
    fields(nwv) {
      // 全部的字段
      this.allfeils = nwv
    },
  },
  // created() {
  //   this.isRequiredlist = []
  // },
  mounted() { },

  methods: {
    // 提交
    submit() {
      // 将rightData1数组中的每一项都映射成一个对象，对象的属性为fieldTitle和impNotNullFlag
      let nerwarr = this.rightData1.map((item) => {
        return {
          defineId: item,
          impNotNullFlag: this.isRequiredlist.includes(item) ? 1 : 0,
        }
      })

      let expArr = this.rightData2.map((item) => {
        return {
          defineId: item,
        }
      })
      var url
      if (this.label == '1') {
        if (this.activeName == '0') {
          //0为导入
          url = resetBoxImpTemplate(nerwarr)
        } else {
          //1为导出
          url = resetBoxExpTemplate(expArr)
        }
      } else {
        if (this.activeName == '0') {
          //0为导入
          url = resetArchiveImpTemplate(nerwarr)
        } else {
          //1为导出
          url = resetArchiveExpTemplate(expArr)
        }
      }
      url
        .then((res) => {
          if (res.data.code == 200) {
            this.$message.success('设置成功')
            this.closeDialog()
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    // 获取到字段名称
    publicMobileMethod(defineId) {
      // 点击获取到这个defineId将其添加到数组isRequiredlist中，如果再次点击的，这个值在数组中存在了就从数组中删除
      if (this.isRequiredlist.includes(defineId)) {
        // 如果值在对象数组中存在，则从对象数组中删除这个对象
        this.isRequiredlist = this.isRequiredlist.filter((item) => item !== defineId)
      } else {
        this.isRequiredlist.push(defineId)
      }
    },
    handleRightChange(val) {
      // 获取到值并且将这个值的颜色改为红色
    },
    openDialog(label) {
      this.label = label
      // 档案
      if (label === '0') {
        queryImpFieldArchive({})
          .then((res) => {
            if (res.data.code === 200) {
              this.rightData1 = res.data.data.map((item) => item.defineId)
              this.isRequiredlist = res.data.data
                .filter((item) => item.impNotNullFlag === 1)
                .map((item) => item.defineId)
            } else {
              this.$message.error(res.data.message)
            }
          })
          .catch((err) => {
            this.$message.error(err)
          })
        queryExpFieldArchive({})
          .then((res) => {
            if (res.data.code === 200) {
              this.rightData2 = res.data.data.map((item) => item.defineId)
            } else {
              this.$message.error(res.data.message)
            }
          })
          .catch((err) => {
            this.$message.error(err)
          })
      } else {
        // 档案盒
        queryImpFieldBox({})
          .then((res) => {
            if (res.data.code === 200) {
              this.rightData1 = res.data.data.map((item) => item.defineId)
            } else {
              this.$message.error(res.data.message)
            }
          })
          .catch((err) => {
            this.$message.error(err)
          })
        queryExpFieldBox({})
          .then((res) => {
            if (res.data.code === 200) {
              this.rightData2 = res.data.data.map((item) => item.defineId)
            } else {
              this.$message.error(res.data.message)
            }
          })
          .catch((err) => {
            this.$message.error(err)
          })
      }
      this.dialogVisible = true
      // 进入界面重新获取所有字段中有必填项的defineId，并且将这个值添加到this.isRequiredlist中
      this.isRequiredlist = this.allfeils
        .filter((item) => item.impNotNullFlag == 1)
        .map((item) => item.defineId)
    },
    closeDialog() {
      this.dialogVisible = false
      this.$refs.tabs.$destroy()
    },
    handleChange(value, direction, movedKeys) { },
    submitfieldName() { },
  },
}
</script>

<style lang="less" scoped>
// 选中之后文字变化
.select_text_color {
  color: red;
}

.el-transfer-panel {
  width: 300px;
}

.el-checkbox {
  margin-right: 10px !important;
}

.el-checkbox__label {
  div {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
